<template>
  <div class="table-card card">
    <div class="table-title">生息地</div>
    <div class="table-container">
      <wid-table :headers="liveHeaders" :data="info.liveData" :widths="liveWidths" :type="liveType"/>
    </div>
    <!-- 任务出现 -->
    <div class="table-title">任务出现</div>
    <div class="table-subtitle">
      <div class="tips">
        绿色为下位任务,红色为上位任务<br/>
        红色为主线怪,黄色为乱入
      </div>
    </div>
    <div class="table-container">
      <wid-table :headers="tarHeaders" :data="info.tarData" :widths="tarWidths" :type="tarType"/>
    </div>
  </div>
</template>
<script>
import {get} from '@/util'
import etag from '@/components/Etag'
import WidTable from '@/components/WidTable'
export default {
  props: [
    'id'
  ],
  components: {
    etag,
    WidTable
  },
  data () {
    return {
      info: {
        liveData: [
          []
        ],
        tarData: [
          []
        ]
      },
      liveHeaders: ['地图', '初始区域', '移动区域', '休息区域'],
      liveWidths: [
        '30%', '20%', '30%', '20%'
      ],
      liveType: [
        0, 0, 0, 0
      ],
      tarHeaders: ['任务', '地图', '出现怪物'],
      tarWidths: [
        '40%', '20%', '40%'
      ],
      tarType: [
        0, 0, 0
      ]
    }
  },
  methods: {
    async getData (mid) {
      const infoData = await get('/weapp/tabappear', {id: mid})
      this.info = infoData
    }
  },
  mounted () {
    this.getData(this.id)
  }
}
</script>
<style>

</style>
